<template>
  <div class="carrier-box">
    <el-col :span="6"
            class="bottom"><span>承运方: </span>
      <b v-if="carrier.name">
        <Tooltip v-if="iconName"
                 :content="content"
                 :placement="placement">
          <icon-svg class-name="iconClass mr5"
                    :icon-name="iconName" />
        </Tooltip>
        {{ carrier.name }}
      </b>
    </el-col>
    <el-col :span="6"
            class="bottom"><span>联系电话: </span>
      <b v-if="carrier.contactMobile">{{ carrier.contactMobile }}</b></el-col>
    <el-col v-if="isShow"
            :span="6"
            class="bottom"><span>自营司机: </span>
      <b v-if="carrier.driverName">{{ carrier.driverName }}</b></el-col>
    <el-col v-if="isShow"
            :span="6"
            class="bottom"><span>联系电话: </span>
      <b v-if="carrier.driverMobile">{{ carrier.driverMobile}}</b></el-col>
  </div>
</template>

<script>
import WaybillMixin from "./waybill.mixin";
import Tooltip from "@components/basic/Tooltip.vue";
export default {
  name: "WaybillCarrier",
  mixins: [WaybillMixin],
  props: ["value"],
  components: {
    Tooltip
  },
  computed: {
    carrier () {
      return {
        name: this.waybill.carrier?.carrierName,
        contactMobile: this.waybill.carrier?.carrierContactMobile,
        driverName: this.waybill.carrier?.driverName || '- -',
        driverMobile: this.waybill.carrier?.driverMobile || '- -'
      };
    },
    isShow () {
      return this.waybill.carrier?.driverName
    },
    placement () {
      return 'top'
    },
    content () {
      const { carrier } = this.waybill
      if (carrier?.carrierType === 0) {
        return '线下'
      }
      if (carrier?.carrierType === 1 && carrier?.carrierExtraType === 0) {
        return '线上'
      }
      return ''
    },
    iconName () {
      const { carrier } = this.waybill
      if (carrier?.carrierType === 0) {
        return 'xianxia'
      }
      if (carrier?.carrierType === 1 && carrier?.carrierExtraType === 0) {
        return 'xianshang'
      }
      return ''
    }
  }
};
</script>

<style scoped>
.bottom {
  padding-bottom: 12px;
  font-size: 16px;
  color: var(--prev-color-text-primary);
}
b {
  font-size: 16px;
  color: var(--prev-color-text-primary);
  font-weight: bold;
  margin-left: 8px;
}
.iconClass {
  width: 14px;
  height: 14px;
}
</style>
